<template>
    <div class="recttask">
        <header style="overflow:hidden">
            <div style="float:left"> <span></span>整改任务发布</div>
            <router-link style="float:right;color:#333333;font-size:18px;text-decoration:none"
                :to="{ name: 'RectTaskRelease' }"><i class="el-icon-arrow-left"></i>返回</router-link>
        </header>
        <div class="body">
            <el-form inline ref="QueryForm" :rules="this.QueryRules" :model="TaskKey">
                <el-form-item label="一级指标：" prop="orgId">
                    <el-select v-model="TaskKey.orgId" clearable placeholder="请选择一级指标">
                        <el-option v-for="(v, k) in orgdata" :key="k" :label="v.orgName" :value="v.orgId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级指标：" prop="leadDepartId">
                    <el-select v-model="TaskKey.leadDepartId" clearable placeholder="请选择二级指标">
                        <el-option v-for="(v, k) in departdata" :key="k" :label="v.departName" :value="v.departId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="三级指标：" clearable prop="deadLine">
                    <el-select v-model="TaskKey.leadDepartId" clearable placeholder="请选择二级指标">
                        <el-option v-for="(v, k) in departdata" :key="k" :label="v.departName" :value="v.departId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" icon="el-icon-search" @click="queryfn">查询</el-button>
                </el-form-item>
            </el-form>
            <div style="height:730px">
                <el-table border ref="multipleTable" :data="AddTaskData" tooltip-effect="dark" style="width: 100%;"
                    @selection-change="selectionChange" stripe
                    :header-cell-style="{ background: '#6E96E9', textAlign: 'center' }">
                    <el-table-column align="center" type="selection" width="42">
                    </el-table-column>
                    <el-table-column label="一级指标" align="center" prop='firstIndex'>
                    </el-table-column>
                    <el-table-column label="二级指标" align="center" prop='secondIndex'>
                    </el-table-column>
                    <el-table-column label="三级指标" align="center" prop='thirdIndex'>
                    </el-table-column>
                    <el-table-column label="得分" align="center" width="125" prop='score'>
                    </el-table-column>
                </el-table>
                <el-button type="success" @click="AddDialog = true" style="margin-top: 30px;" size="small"
                    icon="el-icon-plus">添加</el-button>
            </div>
        </div>
        <footer style="float:right">
            <!-- page-size 每页显示条数  current-page当前页数  total总条数-->
            <el-pagination @size-change="sizechangefn" @current-change="getData" :current-page.sync="currentPage"
                :page-size.sync="pageSize" layout="total, prev, pager, next, jumper" :total="total" background>
            </el-pagination>
        </footer>

        <!-- 添加弹出层 -->
        <el-dialog :visible.sync="AddDialog">
            <h5 style="font-size:18px;color:#333333;text-align:center;font-weight:none;margin-bottom:30px">添加</h5>
            <el-form ref="EditForm" :model="AddTask">
                <el-form-item label="机构：" prop="orgId">
                    <el-select v-model="AddTask.orgId" clearable placeholder="请选择机构">
                        <el-option v-for="(v, k) in orgdata" :key="k" :label="v.orgName" :value="v.orgId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门："  prop="departId">
                    <el-select v-model="AddTask.departId" clearable multiple placeholder="请选择部门">
                        <el-option v-for="(v, k) in departdata" :key="k" :label="v.departName" :value="v.departId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="止期：" clearable prop="deadLine">
                    <el-date-picker v-model="TaskKey.deadLine" type="date" placeholder="选择止期" value-format="timestamp">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="AddTaskFn">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import axios from "axios"
export default {
    name: 'addRectTask',
    data() {
        return {
            // 搜索的条件
            TaskKey: {
                orgld: '',
                leadDepartld: '',
                deadLine: ''
            },
            // 添加的数据
            AddDialog: false,
            AddTask: {},
            // 要删除的数据
            SelectData: [],
            // 表格数据
            AddTaskData: [],
            // 每页条数
            pageSize: 10,
            // 总条数
            total: 0,
            // 当前页数
            currentPage: 1,
            // 机构
            orgdata: [],
            // 部门
            departdata: [],
            EditRules: {
                firstIndex: [
                    { required: true, message: "请填写第一指标", trigger: 'blur' }
                ],
                secondIndex: [
                    { required: true, message: "请填写第二指标", trigger: 'blur' }
                ],
                thirdIndex: [
                    { required: true, message: "请填写第三指标", trigger: 'blur' }
                ],
                orgId: [
                    { required: true, message: '请选择机构', trigger: 'change' }
                ],
                departId: [
                    { required: true, message: '请选择部门', trigger: 'change' }
                ],
                score: [
                    { required: true, message: '请填写评分', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        //获取数据
        getData() {
            // 获取数据的条件
            var term = {
                page: this.currentPage,
                size: this.pageSize,
                TaskKey: this.TaskKey,
            };
            console.log(term);
            this.AddTaskData = [
                {
                    id: 1,
                    orgId: '机构一',
                    departId: '部门二',
                    firstIndex: '第一支部',
                    secondIndex: '第二指标',
                    thirdIndex: '第三指标',
                    score: 5
                },
                {
                    id: 2,
                    orgId: '机构一',
                    departId: '部门二',
                    firstIndex: '第一支部',
                    secondIndex: '第二指标',
                    thirdIndex: '第三指标',
                    score: 5
                },
                {
                    id: 3,
                    orgId: '机构一',
                    departId: '部门二',
                    firstIndex: '第一支部',
                    secondIndex: '第二指标',
                    thirdIndex: '第三指标',
                    score: 5
                },
            ]
        },
        // 查询
        queryfn() {
            this.$refs.QueryForm.validate((valid) => {
                if (valid) {
                    console.log("搜索的数据", this.TaskKey);
                    this.getData();
                } else {
                    return false;
                }
            });

        },
        // 添加
        addRecttask() {
            this.AddDialog = true;
        },
        // 添加提交数据
        AddTaskFn() {
            // 发送post请求修改数据
            this.$refs.AddForm.validate((valid) => {
                if (valid) {
                    let url = `http://192.168.140.1:3500/task/addTaskInfo`
                    axios.post(url, JSON.stringify({
                        score: this.addTask.score,
                        departId: this.addTask.departId,
                        orgId: this.addTask.orgId,
                        firstIndex: this.addTask.firstIndex,
                        secondIndex: this.addTask.secondIndex,
                        thirdIndex: this.addTask.thirdIndex
                    })).then(res => {
                        if (res.data.success == true) {
                            this.HandleTask = res.data.data;
                        } else {
                            this.$message.error("请求失败");
                        }

                    })
                    this.AddDialog = false;
                    // 发送请求
                    console.log("添加，发送请求", this.addTask);

                } else {
                    return false;
                }
            });
            this.addTask = {};
            this.getData();
        },
        // 分页
        sizechangefn() {
            this.currentPage = 1;
            this.getData();
        },
        // 表格多选框
        selectionChange(val) {
            this.SelectData = val;
            console.log(val);
        },
    },
    mounted() {
        this.getData();
        this.total = this.AddTaskData.length
        this.api.org.all().then(res => {
            if (res.data.success == true) {
                this.orgdata = res.data.data
            }
        });
        this.api.depart.all().then(res => {
            if (res.data.success == true) {
                this.departdata = res.data.data
            }
        });
    },
}
</script>

<style scoped>
.recttask {
    text-align: left !important;
}

.recttask header span {
    display: inline-block;
    width: 4px;
    height: 16px;
    margin-right: 5px;
    background: rgb(110, 150, 233);
}

.recttask header {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
}

::v-deep .el-form-item__label {
    width: auto !important;
    padding: 0 !important;
}

::v-deep .el-table thead {
    color: #fff;
}


.body {
    padding: 20px 0;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: #F0F4FD;
}

::v-deep .el-pagination .btn-prev,
::v-deep .el-pagination .btn-next {
    background: #fff;
    border: 1px solid #D7D7D7;
}

::v-deep .el-pagination.is-background .el-pager li {
    background: #fff;
    border: 1px solid #D7D7D7;
}

::v-deep .el-dialog .el-input--suffix {
    width: 224px;
    margin-right: 5px;
}

::v-deep .el-dialog .el-form {
    padding: 0 50px
}

::v-deep .el-dialog__header {
    height: 60px;
    background: #6E96E9;
    box-sizing: border-box;
}

::v-deep .el-dialog {
    width: 544px;
}

::v-deep .el-dialog .el-button {
    width: 400px;
    height: 50px;
    display: block;
    background: #6E96E9;
    margin: 10px auto 0;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 20px;
    color: #fff
}
::v-deep .el-dialog .el-input--suffix {
    width: 300px;
    margin-right: 5px;
}
</style>